iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
2
Software Development

Android animation 30天上手系列 第 3

Day03 View Animation 進階

  • 分享至 

  • xImage
  •  

上一篇,我們用了xml的方式來實作動畫,這篇將 View animation 使用程式碼來實作動畫。

例如這個動畫,每次按Rotate就會順時針轉90度,就需要寫程式來控制。

rotate

RotateAnimation 旋轉動畫

val animation = RotateAnimation(
        fromDegree, //起始角度
        toDegree, //結束角度
        RotateAnimation.RELATIVE_TO_SELF, //pivotXType
        0.5f, //設定x旋轉中心點
        RotateAnimation.RELATIVE_TO_SELF,
        0.5f) //設定y旋轉中心點

//動畫持續時間
animation.duration = 1000

//將圖片載入動畫
this.image.startAnimation(animation)

ScaleAnimation 縮放動畫
scale

//放大1.5放
val animation = ScaleAnimation(
        1.0f,// x起始縮放比例
        1.5f, // x結束縮放比例
        1.0f,// x起始縮放比例
        1.5f, // y結束縮放比例
        Animation.RELATIVE_TO_SELF, 1f,
        Animation.RELATIVE_TO_SELF, 1f)
animation.duration = 1000

this.image.startAnimation(animation)

TranslateAnimation 移動動畫

translate

//x座標增加100,y座標減少100
val animation = TranslateAnimation(
        0f, 
        100f, 
        0f, 
        -100f)
animation.duration = 1000

this.image.startAnimation(animation)

AlphaAnimation 透明度動畫

alpha

//透明過至0.2
val animation = AlphaAnimation(1.0f, 0.2f)
animation.duration = 1000

this.image.startAnimation(animation)

以上就是動畫 旋轉、縮放、移動、透明度,四種基本動畫使用程式碼的方式來撰寫。如果上一篇使用xml的方式已經熟悉的話,這篇的內容其實是相對簡單的。下一篇將再介紹View animation的組合、事件監聽、加速度。

完整程式:
https://github.com/evanchen76/AnimationSet


上一篇
Day02 View Animation
下一篇
Day04 View Animation 進階(2)
系列文
Android animation 30天上手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言